<style scoped lang="less">
table {
  border-collapse: collapse;
}
table th,
td {
  border: 1px solid #e9eaec;
  margin: 0;
  padding: 10px;
}
table tr {
  margin: 0;
}

.border1 {
  border:1px solid #eee;
}

.maxMinContain {
  display:flex;
  .max{
    flex:1;
  }
  .min{
    flex:1;
  }
}

.contentCenter {
  display:flex;
  align-items:center;
  justify-content:center;
}

.textCenter {
  text-align: center;
}

</style>
<template>
  <div>
    <table style="width:100%;">
      <tr class="border1">
        <th>抓取</th>
        <th>属性</th>
        <th>
          <div class="maxMinContain">
            <div class="max contentCenter">上限值</div>
            <div class="min contentCenter">下线值</div>
          </div>
        </th>
        <th>地址码</th>
        <th>数据长度</th>
      </tr>
      <tr v-for="(item,index) in collectionData" :key="index">
        <td class="textCenter">
          <Checkbox v-model="collectionData[index].isGet" disabled></Checkbox>
        </td>
        <td class="textCenter">
          <span>{{collectionData[index].name}}</span>
        </td>
        <td>
          <div class="maxMinContain">
            <div class="max contentCenter">
              <span>{{collectionData[index].warnUp}}</span>
            </div>
            <div class="min contentCenter">
              <span>{{collectionData[index].warnDown}}</span>
            </div>
          </div>
        </td>
        <td class="textCenter">
          <span>{{collectionData[index].valueAddr}}</span>
        </td>
        <td class="textCenter">
          <span>{{collectionData[index].dataLen}}</span>
        </td>
        <!-- <td>
          <Button type="error" @click.native="deleteOne(index)" v-show="index > 0">删除</Button>
        </td> -->
      </tr>
    </table>
    <div style="padding:10px 0;">
      <!-- <Button type="ghost">取消</Button> -->
      <!-- <Button type="success" @click.native="addOne">增加</Button> -->
      <!-- <Button type="info" @click.native="handleSubmit">确定</Button> -->
    </div>
  </div>
</template>
<script>
export default {
  data: function () {
    return {
      valid: false,
      editOneData: {},
      collectionData: [{
        isGet: false,
        name: '电压',
        warnUp: '',
        warnDown: '',
        valueAddr: '',
        dataLen: ''
      }],
      devTypeObj: {}
    }
  },
  created: function () {},
  mounted: function () {
    let self = this
    window.vm.$on('deviceTypeObj', function (data) {
      self.devTypeObj = data
      self.collectionData = self.devTypeObj.iotCollItems
      self.collectionData.forEach((item) => {
        if (item.isGet === 1) {
          item.isGet = true
        } else {
          item.isGet = false
        }
      })
    })
  },
  destroyed: function () {},
  methods: {
    handleSubmit: function () {
      let self = this
      self.valid = true
      if (self.valid) {
        // this.$Message.success('Success!')
        sessionStorage.manageDeviceCollection = true
        self.submitReady()
      } else {
        self.$Message.error('Fail!')
      }
    },
    handleReset: function () {
      console.log(123)
    },
    addOne: function () {
      let self = this
      let obj = {
        isGet: false,
        name: '',
        warnUp: '',
        warnDown: '',
        valueAddr: '',
        dataLen: ''
      }
      self.collectionData.push(obj)
    },
    deleteOne: function (index) {
      let self = this
      if (self.collectionData.length === 1) {}
      self.collectionData.splice(index, 1)
    },
    // 更新data
    updateFormdata: function (data) {
      let self = this
      self.editOneData = JSON.parse(JSON.stringify(data))
      if (self.editOneData.id !== undefined) {
        self.collectionData = self.editOneData.iotDevType.iotCollItems
        self.collectionData.forEach((item) => {
          if (item.isGet === 1) {
            item.isGet = true
          } else {
            item.isGet = false
          }
        })
      } else {
        self.collectionData = [{
          isGet: false,
          name: '',
          warnUp: '',
          warnDown: '',
          valueAddr: '',
          dataLen: ''
        }]
      }
    },
    // submitReady 准备
    submitReady: function () {
      let self = this
      if (!sessionStorage.manageDeviceInfo && sessionStorage.manageDeviceCollection) {
        // oneTab显示内容有误
        let chirldData = {
          tab: 'oneTab',
          arrStr: JSON.stringify(self.collectionData)
        }
        self.$emit('showTab', chirldData)
        return
      }
      // 把数据推送到父组件
      let chirldData = {
        tab: 'twoTab',
        arrStr: JSON.stringify(self.collectionData)
      }
      self.$emit('showTab', chirldData)
      if (sessionStorage.manageDeviceInfo && sessionStorage.manageDeviceCollection) {
        if (self.editOneData.id) {
          self.$emit('updSubmitReady')
        } else {
          self.$emit('saveSubmitReady')
        }
      }
    }
  }
}

</script>
